<template>
  <div class="container">
    <div>
      <p style="font-size: xxx-large">E  P  M  S</p>
      <p>an enterprise management sysytem</p>
    </div>
		<form>
		<p>登 录</p>
			<input type="username" placeholder="用户名" v-model="username"><br>
			<input type="password" placeholder="密码" v-model="pwd"><br>
      <div>
        <el-radio v-model="userType" label="1" border>内部员工</el-radio>
        <el-radio v-model="userType" label="2" border>公司客户</el-radio>
      </div>
			<input type="button" @click="login" value="提 交">

		</form>
		<div class="drops"><div class="drop drop-1"></div><div class="drop drop-2"></div><div class="drop drop-3">

			</div><div class="drop drop-4"></div>
			<div class="drop drop-5"></div>
		</div>
	</div>
</template>

<script>
  // import 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap'
  import Global from "../utils/global.js"
  // import


  // import 'https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js'
  export default {
    name: 'Login',
    data(){
      return {
        username:'',
        pwd:'',
        userType:-1,
        glo:new Global

      }
    },
    methods:{
      handleLogin (res) {
        console.log(res);
        let feedBack =eval(res);
        if(feedBack.success == false){//登录失败
          this.$message("用户名或密码错误，或者登陆类型不正确!");
          return;
        }
        console.log("int handle:",this.userType);
        if (this.userType == 2){
          //对于client
          //1.存储到session中
          console.log('glo')
          this.glo.storeData('name',res.data.client.cUsername)
          this.glo.storeData('ClientInfo',res.data.client)
          this.glo.storeData('pwd',this.pwd)
          // sessionStorage.setItem('ClientInfo',(res.data.client))
          //2.也传输到后端路由去
          this.$router.push({path:'/Client', query:{
            name:res.data.client.cUsername,  //专门给header用
            cEmail:res.data.client.cEmail,
            cId:res.data.client.cId,
            cName:res.data.client.cName,
            cPhoneNumber:res.data.client.cPhoneNumber,
            cQNumber:res.data.client.cQNumber,
            cTel:res.data.client.cTel,
            cUnit:res.data.client.cUnit,
            cUserName:res.data.client.cUserName
          }})
        }
        else{//对于staff
          var sType = feedBack.data.staff.sType;
          console.log("stype:",sType);

          res.data.staff.sPwd = this.pwd
          this.glo.storeData('StaffInfo',res.data.staff)//将staff 的信息存储到session中
          this.glo.storeData('name',res.data.staff.sUsername)
          // this.glo.storeData('pwd',this.pwd)

          if(sType === 1 || sType === 2 || sType === 3){
            //主管

            this.$message('主管:'+res.data.staff.sUsername)

            this.$router.push({path:'/Manager', query:{
              name:res.data.staff.sUsername,  //专门给header用
              sUsername:res.data.staff.sUsername,
              sId:res.data.staff.sId,
              sAddress:res.data.staff.sAddress,
              sIdNumber:res.data.staff.sIdNumber,
              sName:res.data.staff.sName,
              sSex:res.data.staff.sSex,
              sTel:res.data.staff.sTel,
              sType:res.data.staff.sType
              }})
          }
          // else if(sType === 4 || sType === 5 || sType === 6){
          //   //生手
          //
          //   this.$message('欢迎, 生手:'+res.data.staff.sUsername)
          //   this.$router.push({path:'/NewDev', query:{
          //       name:res.data.staff.sUsername,  //专门给header用
          //       sUsername:res.data.staff.sUsername,
          //       sId:res.data.staff.sId,
          //       sAddress:res.data.staff.sAddress,
          //       sIdNumber:res.data.staff.sIdNumber,
          //       sName:res.data.staff.sName,
          //       sSex:res.data.staff.sSex,
          //       sTel:res.data.staff.sTel,
          //       sType:res.data.staff.sType
          //   }})
          // }
          else if(sType === 4 || sType === 5 || sType === 6 ||sType === 7 || sType === 8 || sType === 9){
            //熟手
            this.$message('熟手:'+res.data.staff.sUsername)
            this.$router.push({path:'/OldDev',query:{
                name:res.data.staff.sUsername,  //专门给header用
                sUsername:res.data.staff.sUsername,
                sId:res.data.staff.sId,
                sAddress:res.data.staff.sAddress,
                sIdNumber:res.data.staff.sIdNumber,
                sName:res.data.staff.sName,
                sSex:res.data.staff.sSex,
                sTel:res.data.staff.sTel,
                sType:res.data.staff.sType
            }})
          }
          else if(sType === 10){
            //前台
            this.$message('Welcome, '+res.data.staff.sUsername);
            this.$router.push({path:'/ProMan',query:{
              name:res.data.staff.sUsername,  //专门给header用
              sUsername:res.data.staff.sUsername,
              sId:res.data.staff.sId,
              sAddress:res.data.staff.sAddress,
              sIdNumber:res.data.staff.sIdNumber,
              sName:res.data.staff.sName,
              sSex:res.data.staff.sSex,
              sTel:res.data.staff.sTel,
              sType:res.data.staff.sType
            }})

          }else if(sType === 11){
            //超级管理员
            this.$message('超级管理员:'+res.data.staff.sUsername)
            this.$router.push({path:'/Super',query:{
                name:res.data.staff.sUsername,  //专门给header用
                sUsername:res.data.staff.sUsername,
                sId:res.data.staff.sId,
                sAddress:res.data.staff.sAddress,
                sIdNumber:res.data.staff.sIdNumber,
                sName:res.data.staff.sName,
                sSex:res.data.staff.sSex,
                sTel:res.data.staff.sTel,
                sType:res.data.staff.sType
            }})
          }
        }
        return undefined
        },
      login(){
        console.log('login')
        var userType = 0;
        var username = 'noUsername';
        var pwd = "0";
        userType = this.userType;//请求发过去的是 1(员工) / 2(客户)
        username = this.username;
        pwd = this.pwd;


        var data = {
          userName:username,
          password:pwd,
          type:userType
        }
        this.glo.sendDate(this.glo.server+"Login",data,this.handleLogin)



      }
    }

  }
</script>

<style >
 cyrillic-ext
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gTD_u50.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gbD_u50.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_cJD3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3gTD_u50.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3g3D_u50.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3gbD_u50.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_ZpC3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  body{background:linear-gradient(45deg, #fcca9b, #61abfb);
height:100vh}.container{position:absolute;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
top:50%;
left:50%}form{background:rgba(255,255,255,0.3);
padding:3em;
height:400px;
border-radius:20px;
border-left:1px solid rgba(255,255,255,0.3);
border-top:1px solid rgba(255,255,255,0.3);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
box-shadow:20px 20px 40px -6px rgba(0,0,0,0.2);
text-align:center;
position:relative}form p{font-family:Montserrat,sans-serif;
font-weight:500;
color:#606266;
opacity:.7;
font-size:1.4rem;
margin-top:0;
margin-bottom:60px;
text-shadow:2px 2px 4px rgba(0,0,0,0.2)}form input{background:transparent;
width:200px;
padding:1em;
margin-bottom:2em;
border:0;
border-left:1px solid rgba(255,255,255,0.3);
border-top:1px solid rgba(255,255,255,0.3);
border-radius:5000px;
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
box-shadow:4px 4px 60px rgba(0,0,0,0.2);
color:#606266;
font-family:Montserrat,sans-serif;
font-weight:500;
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
text-shadow:2px 2px 4px rgba(0,0,0,0.2)}form input:hover{background:rgba(255,255,255,0.1);
box-shadow:4px 4px 60px 8px rgba(0,0,0,0.2)}form input[type="email"]:focus,form input[type="password"]:focus{background:rgba(255,255,255,0.1);
box-shadow:4px 4px 60px 8px rgba(0,0,0,0.2)}form input[type="button"]{margin-top:10px;
width:150px;
font-size:1rem}form input[type="button"]:hover{cursor:pointer}form input[type="button"]:active{background:rgba(255,255,255,0.2)}::-webkit-input-placeholder{font-family:Montserrat,sans-serif;
font-weight:400;
color:#606266;
text-shadow:2px 2px 4px rgba(0,0,0,0.4)}::-moz-placeholder{font-family:Montserrat,sans-serif;
font-weight:400;
color:#606266;
text-shadow:2px 2px 4px rgba(0,0,0,0.4)}:-ms-input-placeholder{font-family:Montserrat,sans-serif;
font-weight:400;
color:#606266;
text-shadow:2px 2px 4px rgba(0,0,0,0.4)}::-ms-input-placeholder{font-family:Montserrat,sans-serif;
font-weight:400;
color:#606266;
text-shadow:2px 2px 4px rgba(0,0,0,0.4)}::placeholder{font-family:Montserrat,sans-serif;
font-weight:400;
color:#606266;
text-shadow:2px 2px 4px rgba(0,0,0,0.4)}.drop{background:rgba(255,255,255,0.3);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-radius:10px;
border-left:1px solid rgba(255,255,255,0.3);
border-top:1px solid rgba(255,255,255,0.3);
box-shadow:10px 10px 60px -8px rgba(0,0,0,0.2);
position:absolute;
-webkit-transition:all .2s ease;
transition:all .2s ease}.drop-1{height:80px;
width:80px;
top:-20px;
left:-40px;
z-index:-1}.drop-1:hover{-webkit-transform:translate(-2px,-3px);
transform:translate(-2px,-3px)}.drop-2{height:80px;
width:80px;
bottom:-30px;
right:-10px}.drop-2:hover{-webkit-transform:translate(3px,4px);
transform:translate(3px,4px)}.drop-3{height:100px;
width:100px;
bottom:120px;
right:-50px;
z-index:-1}.drop-3:hover{-webkit-transform:translate(4px,0px);
transform:translate(4px,0px)}.drop-4{height:120px;
width:120px;
top:-60px;
right:-60px}.drop-4:hover{-webkit-transform:translate(5px,-5px);
transform:translate(5px,-5px)}.drop-5{height:60px;
width:60px;
bottom:170px;
left:90px;
z-index:-1}input:focus,select:focus,textarea:focus,button:focus{outline:0}

</style>
